
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
 <style type="text/css">
  td{
    white-space:nowrap;
    overflow:hidden;
    word-break:keep-all;
   }

</style>
  
 <div class="card">
    <div class="card-header"><h4>菜单管理</h4></div>
    <div class="card-body">
        <div class='row'>
          <div class="controls col-sm-4">
            <select class="form-control" id='qy_yxbz'>
              <option value=''>全部状态</option>
              <option value='Y'>有效</option>
              <option value='N'>无效</option>
            </select>
          </div>

          <div class="form-group col-sm-4">
            <input class="form-control" type="text" id="qy_gnmc"  placeholder="菜单名称" >
          </div>

          <div class="form-group col-sm-4">
            <button class="btn btn-info btn-w-md" type="button" id='query_data'>查   询</button>
          </div>
   
        </div>
        <hr>

        <div class="row">
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                  <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel"></h4>
                      </div>
                      <div class="modal-body">
                        <form>
                          <div class="form-group">
                            <label for="recipient-name" class="control-label">功能代码：</label>
                            <input type="text" class="form-control" id="gn_dm">
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="control-label">功能名称：</label>
                            <input type="text" class="form-control" id="gnmc">
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="control-label">图标(随机20个)：</label>
                              <div class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                 <input  type="text" id="input_icon" class="form-control" value="请选择"></a>
                                <ul class="dropdown-menu" id="icon" style="height:200px;width:100%;overflow-y:scroll;">
                                  

                                </ul>
                              </div>
                          </div>   
                            <div class="controls">
                            <label for="message-text" class="control-label">上级菜单：</label>
                            <select class="form-control" id='sjgn_id'>
                              
                            </select>
                            </div>    
                          <div class="row">
                            <div class="controls col-md-6" style="float: left;">
                            <label for="message-text" class="control-label">有效标记：</label>
                            <select class="form-control" id='yxbz'>
                              <option value='Y'>有效</option>
                              <option value='N'>无效</option>
                            </select>
                            </div>    
                            <div class="form-group col-md-6" >
                              <label for="message-text" class="control-label">序号：</label>
                              <input type="number" class="form-control" id="xh">
                            </div>  
                          </div> 
                                           
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id='btn_menu'>提交</button>
                      </div>
                    </div>
                  </div>
                </div>

        <div class="col-sm-12">
              
          <div style="height:600px;overflow:auto">
            <table class ='table-striped' id="table"></table>
          </div>
        </div>


    </div>
  </div>
  </div>

 <script src="static/js/bootstrap-table.min.js"></script>
 <script src="static/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function(){

    initTable();


     function initTable() {

              var t = $("#table").bootstrapTable({

              url: '/xt_menu',
              method: 'get',
              dataType: "json",
              striped: true,//设置为 true 会有隔行变色效果
              undefinedText: "空",//当数据为 undefined 时显示的字符
              pagination: true, //分页
      //      paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
      //      showToggle: "true",//是否显示 切换试图（table/card）按钮
      //      showColumns: "true",//是否显示 内容列下拉框
              pageNumber: 1,//如果设置了分页，首页页码
      //      showPaginationSwitch:true,//是否显示 数据条数选择框
              pageSize: 10,//如果设置了分页，页面数据条数
              pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
              paginationPreText: '<<',//指定分页条中上一页按钮的图标或文字,这里是<
              paginationNextText: '>>',//指定分页条中下一页按钮的图标或文字,这里是>
      //      singleSelect: false,//设置True 将禁止多选
              search: true, //显示搜索框
              //data_local: "zh-US",//表格汉化
              sidePagination: "client", //服务端处理分页
              queryParams: queryParams,//将返回的值赋值给table插件的属性
              responseHandler:function(res){
                let html = '<option value="">无（一级菜单）</option>'
                for(let i=0;i < res.total;i++){
                  if(res.rows[i].sjgnmc == null){
                    html+='<option value='+res.rows[i].gn_id+'>'+res.rows[i].gnmc+'</option>'
                  }
                }
                $('#sjgn_id').html(html)
                  return{
                      "total":res.total,
                      "rows": res.rows,
                  }
              },
              idField: "gn_id",//指定主键列
              columns: [{
                          field:'gn_id',
                          title:'菜单ID'
                      },{
                          field:'gn_dm',
                          title:'菜单代码'
                      },{
                          field:'gnmc',
                          title:'菜单名称'
                      },{
                          field:'icon',
                          title:'图标',
                          formatter: function (value, records, index) {
                              let html= ''
                                html = '<i class="mdi '+records.icon+'"></i>'+records.icon
                              return html
                            }                      
                      },{
                          field:'xh',
                          title:'序号'
                      },{
                          field:'yxbz',
                          title:'有效标志'
                      },{
                          field:'sjgnmc',
                          title:'上级菜单名称',
                          formatter: function (value, records, index) {
                              let html= records.sjgnmc
                              if(records.sjgnmc == null){
                                html = '<span class="label label-info"><i class="mdi mdi-server">目录</i></span>'
                              }
                              return html
                            }            
                      },{
                          title: '操作',          
                          align: 'center',
                          formatter: function (value, records, index) {
                              let html= ''
                                html = '<a href=javascript:menu_edit(' + records.gn_id + ') class="btn btn-warning btn-sm" >修改</a> '+
                                       '<a href=javascript:menu_delete(' +records.gn_id + ') class="btn btn-danger btn-sm" >删除</a> '
                                if(records.sjgnmc == null){
                                  html = '<a href=javascript:menu_add(' +records.gn_id + ') class="btn btn-success btn-sm" >新增</a> '+html
                                }
                              return html
                            }
                        }
                      ]
          });
      };


        //分页查询参数，是以键值对的形式设置的
        function queryParams(params) {
            params.yxbz = $('#qy_yxbz').val();// 请求时向服务端传递的参数
            params.gnmc =$('#qy_gnmc').val();
            return  params
        }

        // 搜索按钮触发事件
        $("#query_data").click(function() {
              $('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
        });

     $('#btn_menu').click(function(){
        let gn_id = $('#exampleModalLabel').text().slice(-9)
        url = '/xt_menu_add'
        if(gn_id.length == 9){
          url = '/xt_menu_edit'
        }

        let data = {
          'gn_id' :gn_id,
          'gn_dm' : $('#gn_dm').val(),
          'gnmc' : $('#gnmc').val(),
          'icon' : $('#input_icon').val(),
          'sjgn_id' : $('#sjgn_id').val(),
          'yxbz' : $('#yxbz').val(),
          'xh' : $('#xh').val()
        }

        $.ajax({
            "url":url,
            "async" : true,
            "dataType":'json',
            "data":data,
            "type" : "post",
            "success":function (data) {
              alert(data.mes)
              $('#table').bootstrapTable(('refresh'));
              $('#exampleModal').modal('hide')
            },    
            "error":function (res) {  
                alert(res)
            } 
        });

     })


  });
    //菜单删除
     function menu_delete(id){
         let r = confirm("确定要删除吗？")
         if (r == false){
            return
         }
        $.ajax({
                  //请求方式
            type : "post",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/xt_menu_delete",
            //数据，json字符串
            data : {'gn_id':id},
            //请求成功
            success : function(rs) {
              alert(rs.mes)
              $('#table').bootstrapTable(('refresh'));
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });

     }
    //菜单增加
     function menu_add(id){
        $('form')[0].reset()
        $('#sjgn_id').val(id)
        $('#exampleModalLabel').html('新增菜单')
        $('#exampleModal').modal('show')
     }
    //修改菜单
     function menu_edit(id){
        $('#exampleModalLabel').html('修改菜单'+id)
        $('#exampleModal').modal('show')
        $.ajax({
                  //请求方式
            type : "get",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/xt_menu_edit",
            //数据，json字符串
            data : {'gn_id':id},
            //请求成功
            success : function(rs) {
              $('#gn_dm').val(rs.gn_dm)
              $('#gnmc').val(rs.gnmc)
              $('#sjgn_id').val(rs.sjgn_id)
              $('#input_icon').val(rs.icon)
              $('#yxbz').val(rs.yxbz)
              $('#xh').val(rs.xh)
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });
     }


//图标点击
  $('#input_icon').click(function(){
    $.ajax({
            //请求方式
            type : "get",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/xt_menu_getIcon",
            //请求成功
            success : function(rs) {
              
              let html =''
              for(let i=0;i<rs.length;i++){
                html += '<li value='+rs[i].icons+'><i class="mdi '+rs[i].icons+'"></i><span style="float:right">'+rs[i].icons+'</span></li>'

              }
              $('#icon').html(html)

            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });

  })

  $(document).on('click','.dropdown-menu li',function(){
    let li_icon = $(this).attr('value')
    $('#input_icon').val(li_icon)
  })

</script>
